<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/admin/css/other/department.css"/>
    <link rel="stylesheet" href="/admin/css/other/console2.css"/>
    <style>
        .pear-card-title {
            display: flex;
            justify-content: center;
            flex-direction: row;
            flex-wrap: nowrap;
        }

        .pear-card {
            display: flex;
            align-items: center;
            justify-content: center
        }

        .layui-form-select dl {
            max-height: 250px;
            top: 42px;
            bottom: unset;
        }

        .pear-btn i {
            font-size: 14px;
        }

        .layui-form-label {
            width: 90px;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                手动操作
            </div>
            <div class="layui-card-body">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home1" data-title="仓位下行" data-url="" id="motorForward">
                            <img src="/img/正转.svg" id="motorForward-img" alt="">
                        </div>
                        <span class="pear-card-title" id="motorForward-span">仓位下行</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3">
                        <div class="pear-card" data-id="home2" data-title="仓位上行" data-url="" id="motorReverse">
                            <img src="/img/反转.svg" alt="" id="motorReverse-img">
                        </div>
                        <span class="pear-card-title" id="motorReverse-span">仓位上行</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3" onclick="door('开门')">
                        <div class="pear-card" data-id="home2" data-title="手动开门" data-url="">
                            <img src="/img/开门.svg" alt="">
                        </div>
                        <span class="pear-card-title">手动开门</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3" onclick="door('关门')">
                        <div class="pear-card" data-id="home2" data-title="手动关门" data-url="">
                            <img src="/img/关门.svg" alt="">
                        </div>
                        <span class="pear-card-title">手动关门</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3" onclick="doorStop('门停止')">
                        <div class="pear-card" data-id="home2" data-title="门停止" data-url="">
                            <img src="/img/门停止.svg" alt="">
                        </div>
                        <span class="pear-card-title">门停止</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3" onclick="inventory()">
                        <div class="pear-card" data-id="home2" data-title="盘库" data-url="">
                            <img src="/img/盘库.svg" alt="" style="height: 35px;">
                        </div>
                        <span class="pear-card-title">盘库</span>
                    </div>
                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3" onclick="faultReset()">
                        <div class="pear-card" data-id="home2" data-title="故障复位" data-url="">
                            <img src="/img/故障复位.svg" alt="" style="height: 35px;">
                        </div>
                        <span class="pear-card-title">故障复位</span>
                    </div>
<!--                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3" onclick="turnOnHeating()">-->
<!--                        <div class="pear-card" data-id="home2" data-title="加热" data-url="">-->
<!--                            <img src="/img/加热.svg" alt="" style="height: 35px;">-->
<!--                        </div>-->
<!--                        <span class="pear-card-title">开启加热</span>-->
<!--                    </div>-->
<!--                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3" onclick="turnOffHeating()">-->
<!--                        <div class="pear-card" data-id="home2" data-title="关闭" data-url="">-->
<!--                            <img src="/img/关闭.svg" alt="" style="height: 35px;">-->
<!--                        </div>-->
<!--                        <span class="pear-card-title">关闭加热</span>-->
<!--                    </div>-->
<!--                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3" onclick="turnOnTheLight()">-->
<!--                        <div class="pear-card" data-id="home2" data-title="开灯" data-url="">-->
<!--                            <img src="/img/开灯.svg" alt="" style="height: 35px;">-->
<!--                        </div>-->
<!--                        <span class="pear-card-title">开灯</span>-->
<!--                    </div>-->
<!--                    <div class="layui-col-md1 layui-col-sm3 layui-col-xs3" onclick="turnOffTheLights()">-->
<!--                        <div class="pear-card" data-id="home2" data-title="关灯" data-url="">-->
<!--                            <img src="/img/关灯.svg" alt="" style="height: 35px;">-->
<!--                        </div>-->
<!--                        <span class="pear-card-title">关灯</span>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space10">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">
                选层操作
            </div>
            <div class="layui-card-body">
                <form class="layui-form" action="" onsubmit="return false">
                    <div class="layui-form-item">
                        <label class="layui-form-label">目标层:</label>
                        <div class="layui-input-inline">
                            <select name="layer" lay-verify="required" lay-search>
                                <option value="">请选择层</option>
                                <option th:each="layer : ${layerList}" th:value="${layer}"
                                        th:selected="${currentLayer} eq ${layer}" th:text="${layer}"></option>
                            </select>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit
                                    lay-filter="machineTurn">
                                <i class="layui-icon layui-icon-search"></i>
                                运行
                            </button>
                            <button class="pear-btn pear-btn-md pear-btn-danger" lay-submit lay-filter="motorStopped">
                                <i class="layui-icon layui-icon-pause"></i>
                                停止
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
<!--    <div class="layui-col-md6">-->
<!--        <div class="layui-card">-->
<!--            <div class="layui-card-header">-->
<!--                模式切换-->
<!--            </div>-->
<!--            <div class="layui-card-body">-->
<!--                <form class="layui-form" action="" onsubmit="return false">-->
<!--                    <div class="layui-form-item">-->
<!--                        <label class="layui-form-label">手动自动切换:</label>-->
<!--                        <div class="layui-input-inline">-->
<!--                            <input type="radio" name="motor_controller_type"-->
<!--                                   th:checked="${ motor_controller_type == '1'}? 'true':'false'"-->
<!--                                   value="1"-->
<!--                                   title="手动">-->
<!--                            <input type="radio" name="motor_controller_type"-->
<!--                                   th:checked="${ motor_controller_type == '2'}? 'true':'false'"-->
<!--                                   value="2"-->
<!--                                   title="自动" checked>-->
<!--                        </div>-->
<!--                        <div class="layui-form-item layui-inline">-->
<!--                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit-->
<!--                                    lay-filter="motorControllerType">-->
<!--                                <i class="layui-icon layui-icon-search"></i>-->
<!--                                保存-->
<!--                            </button>-->
<!--                            <button type="reset" class="pear-btn pear-btn-md">-->
<!--                                <i class="layui-icon layui-icon-refresh"></i>-->
<!--                                重置-->
<!--                            </button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </form>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
</div>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    var $ = layui.jquery;

    // 门停止
    function doorStop() {
        let loading = layer.load();
        $.ajax({
            url: "/motor/manual/doorStop",
            dataType: 'json',
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                layer.close(loading);
                if (result.code == 200) {
                    layer.msg(result.message, {
                        icon: 1,
                        time: 3000
                    });
                } else {
                    layer.msg(result.message, {
                        icon: 2,
                        time: 3000
                    });
                }
            }
        });
    }

    // 故障复位
    function faultReset() {
        let loading = layer.load();
        $.ajax({
            url: "/motor/manual/faultReset",
            dataType: 'json',
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                layer.close(loading);
                if (result.code == 200) {
                    layer.msg(result.message, {
                        icon: 1,
                        time: 3000
                    });
                } else {
                    layer.msg(result.message, {
                        icon: 2,
                        time: 3000
                    });
                }
            }
        });
    }

    //开启加热
    function turnOnHeating() {
        let loading = layer.load();
        $.ajax({
            url: "/motor/manual/turnOnHeating",
            dataType: 'json',
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                layer.close(loading);
                if (result.code == 200) {
                    layer.msg(result.message, {
                        icon: 1,
                        time: 3000
                    });
                } else {
                    layer.msg(result.message, {
                        icon: 2,
                        time: 3000
                    });
                }
            }
        });
    }
    // 关闭加热
    function turnOffHeating() {
        let loading = layer.load();
        $.ajax({
            url: "/motor/manual/turnOffHeating",
            dataType: 'json',
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                layer.close(loading);
                if (result.code == 200) {
                    layer.msg(result.message, {
                        icon: 1,
                        time: 3000
                    });
                } else {
                    layer.msg(result.message, {
                        icon: 2,
                        time: 3000
                    });
                }
            }
        });
    }
    // 开灯
    function turnOnTheLight() {
        let loading = layer.load();
        $.ajax({
            url: "/motor/manual/turnOnTheLight",
            dataType: 'json',
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                layer.close(loading);
                if (result.code == 200) {
                    layer.msg(result.message, {
                        icon: 1,
                        time: 3000
                    });
                } else {
                    layer.msg(result.message, {
                        icon: 2,
                        time: 3000
                    });
                }
            }
        });
    }
    //关灯
    function turnOffTheLights() {
        let loading = layer.load();
        $.ajax({
            url: "/motor/manual/turnOffTheLights",
            dataType: 'json',
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                layer.close(loading);
                if (result.code == 200) {
                    layer.msg(result.message, {
                        icon: 1,
                        time: 3000
                    });
                } else {
                    layer.msg(result.message, {
                        icon: 2,
                        time: 3000
                    });
                }
            }
        });
    }

    //开关门
    function door(param) {
        let loading = layer.load();
        let doorState = null;
        if (param == '开门') {
            doorState = "true";
        } else {
            doorState = "false";
        }
        $.ajax({
            url: "/motor/manual/door",
            dataType: 'json',
            type: 'GET',
            data: {"doorState": doorState},
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                layer.close(loading);
                if (result.code == 200) {
                    layer.msg(result.message, {
                        icon: 1,
                        time: 3000
                    });
                } else {
                    layer.msg(result.message, {
                        icon: 2,
                        time: 3000
                    });
                }
            }
        });
    }

    //盘库
    function inventory() {
        let loading = layer.load();
        $.ajax({
            url: "/motor/manual/inventory",
            dataType: 'json',
            type: 'GET',
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                layer.close(loading);
                if (result.code == 200) {
                    layer.msg(result.message, {
                        icon: 1,
                        time: 3000
                    });
                } else {
                    layer.msg(result.message, {
                        icon: 2,
                        time: 3000
                    });
                }
            }
        });
    }

    layui.use(['form', 'jquery'], function () {
        let form = layui.form;
        let $ = layui.jquery;

        function reqeustUtil(url, data) {
            let loading = layer.load();
            $.ajax({
                url: url,
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                type: "POST",
                data: JSON.stringify(data.field),
                success: function (result) {
                    layer.close(loading);
                    if (result.code == 200) {
                        layer.msg(result.message, {icon: 1, time: 3000});
                    } else {
                        layer.msg(result.message, {icon: 2, time: 3000});
                    }
                }
            })
        }

        // 扫描层
        form.on('submit(user-query)', function (data) {
            reqeustUtil('/motor/manual/current/layer/save', data)
            return false;
        });
        // 选层操作
        form.on('submit(machineTurn)', function (data) {
            reqeustUtil('/motor/manual/machine/turn', data)
            return false;
        });
        // 选层操作停止按钮
        form.on('submit(motorStopped)', function (data) {
            reqeustUtil('/motor/manual/machine/stop', data)
            return false;
        });
        //电机控制类型
        form.on('submit(motorControllerType)', function (data) {
            reqeustUtil("/setting/motor/controller/type", data);
            return false;
        })
        // 仓位下行  处理
        $("#motorForward").click(function () {
            let motorForward = $("#motorForward-span").text();
            let motorReverse = $("#motorReverse-span").text();
            if (motorReverse === "停止") {
                layer.msg("请先停止电机运转，再操作", {icon: 2, time: 3000});
            } else if ("仓位下行" === motorForward) {
                let loading = layer.load();
                $.ajax({
                    url: "/motor/manual/forward",
                    dataType: 'json',
                    type: 'GET',
                    data: {"action": "start"},
                    contentType: "application/json;charset=utf-8",
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 200) {
                            layer.msg(result.message, {
                                icon: 1,
                                time: 3000
                            });
                            $("#motorForward-span").text('停止');
                            $("#motorForward-span").css('color', "red");
                            $("#motorForward-img").attr("src", "/img/停止.svg");
                        } else {
                            layer.msg(result.message, {
                                icon: 2,
                                time: 3000
                            });
                        }
                    }
                })
            } else if ("停止" === motorForward) {
                let loading = layer.load();
                $.ajax({
                    url: "/motor/manual/forward",
                    dataType: 'json',
                    type: 'GET',
                    data: {"action": "stop"},
                    contentType: "application/json;charset=utf-8",
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 200) {
                            layer.msg(result.message, {
                                icon: 1,
                                time: 3000
                            });
                            $("#motorForward-span").text('仓位下行');
                            $("#motorForward-span").removeAttr('style');
                            $("#motorForward-img").attr("src", "/img/正转.svg");
                        } else {
                            layer.msg(result.message, {
                                icon: 2,
                                time: 3000
                            });
                        }
                    }
                })
            }
        });
        // 仓位上行  处理
        $("#motorReverse").click(function () {
            let motorForward = $("#motorForward-span").text();
            let motorReverse = $("#motorReverse-span").text();
            if (motorForward === "停止") {
                layer.msg("请先停止电机运转，再操作", {icon: 2, time: 3000});
            } else if ("仓位上行" === motorReverse) {
                let loading = layer.load();
                $.ajax({
                    url: "/motor/manual/reverse",
                    dataType: 'json',
                    type: 'GET',
                    data: {"action": "start"},
                    contentType: "application/json;charset=utf-8",
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 200) {
                            layer.msg(result.message, {
                                icon: 1,
                                time: 3000
                            });
                            $("#motorReverse-span").text('停止');
                            $("#motorReverse-span").css('color', "red");
                            $("#motorReverse-img").attr("src", "/img/停止.svg");
                        } else {
                            layer.msg(result.message, {
                                icon: 2,
                                time: 3000
                            });
                        }
                    }
                })
            } else if ("停止" === motorReverse) {
                let loading = layer.load();
                $.ajax({
                    url: "/motor/manual/reverse",
                    dataType: 'json',
                    type: 'GET',
                    data: {"action": "stop"},
                    contentType: "application/json;charset=utf-8",
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 200) {
                            layer.msg(result.message, {
                                icon: 1,
                                time: 3000
                            });
                            $("#motorReverse-span").text('仓位上行');
                            $("#motorReverse-span").removeAttr('style');
                            $("#motorReverse-img").attr("src", "/img/反转.svg");
                        } else {
                            layer.msg(result.message, {
                                icon: 2,
                                time: 3000
                            });
                        }
                    }
                })
            }
        });
    })
</script>


</body>
</html>